<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .fancy {
            text-shadow: 2px 2px 3px gold;
        }

        /* 类名不是 `.fancy` 的 <p> 元素*/
        p:not(.fancy) {
            color: green;
        }

        /* 非 <p> 元素 */
        body :not(p) {
            text-decoration: underline;
        }

        /* 既不是 <div> 也不是 <span> 的元素 */
        body :not(div):not(span) {
            font-weight: bold;
        }

        /* 不是 <div> 或 `.fancy` 的元素*/
        body :not(div, .fancy) {
            text-decoration: overline underline;
        }

        /* <h2> 元素中不是有 `.foo` 类名的 <span> 元素 */
        h2 :not(span.foo) {
            color: red;
        }

    </style>
</head>
<body>
<p>我是一个段落。</p>
<p class="fancy">我非常非常喜欢！</p>
<div>我不是一个段落。</div>
<h2>
    <span class="foo">foo 在 h2 里面</span>
    <span class="bar">bar 在 h2 里面</span>
</h2>

</body>
</html>
